<template>
    <page-main title="统计分析">
        <div class="system-content">
            <div class="legend-list">
                <div class="report legend-li">
                    <img class="legend-li-logo" src="@/assets/sprites/homepage.configuration.example/qr-code.png"/>
                    <div>
                        <div>报告二维码数量</div>
                        <div class="legend-num">{{ form['reportNum'] }}</div>
                    </div>
                </div>
                <div class="sample legend-li">
                    <img class="legend-li-logo" src="@/assets/sprites/homepage.configuration.example/qr-code.png"/>
                    <div>
                        <div>报告二维码数量</div>
                        <div class="legend-num">{{ form['sampleNum'] }}</div>
                    </div>
                </div>
                <div class="user legend-li">
                    <img class="legend-li-logo" src="@/assets/sprites/homepage.configuration.example/user.png"/>
                    <div>
                        <div>用户二维码数量</div>
                        <div class="legend-num">{{ form['userNum'] }}</div>
                    </div>
                </div>
            </div>
            <div class="line-chart">
                <div class="line-chart-title">
                    <img src="@/assets/sprites/homepage.configuration.example/statistics-title.png"/>
                    <span>统计图表</span>
                </div>
                <div class="chart-container">
                    <line-chart id="line-chart" width="100%" height="100%" ref="line-chart"></line-chart>
                </div>
            </div>
        </div>
    </page-main>
</template>

<script>
// 请求接口
import { HomePage_SumData } from "@/server/homepage"
// 组件
import LineChart from "../components/lineChart"

export default {
    components: {
        LineChart
    },
    data() {
        return {
            form: {
                reportNum: 0,
                sampleNum: 0,
                userNum: 0
            }
        }
    },
    mounted() {
        // 获取数据
        HomePage_SumData().then(res=>{
            // 设置报告数量
            this.form = res.data;
            // 设置图表
            let x = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
            let y1 = [];
            let y2 = [];
            let l = x.length;
            for( let i=0;i<l;i++ ) {
                let y1Item = res.data['reportByMonth'].find(ele=>ele['month']==x[i]);
                let y2Item = res.data['sampleByMonth'].find(ele=>ele['month']==x[i]);
                if( !!y1Item ) {
                    y1[i] = y1Item['total']
                }
                if( !!y2Item ) {
                    y2[i] = y2Item['total']
                }
            }
            // 初始化图表
            this.$refs['line-chart'].initChart({
                x,
                y1,
                y2
            })
        });
    },
    methods: {
        
    }
}
</script>

<style lang="scss" scoped>
.system-content {
    display: flex;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 20px;
    padding-right: 20px;
    .legend-list {
        width: 320px;
        .legend-li {
            width: 100%;
            height: 142px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            &:nth-of-type(n+2) {
                margin-top: 32px;
            }
            .legend-li-logo {
                width: 60px;
                height: 55px;
                margin-right: 32px;
            }
            .legend-num {
                font-size: 30px;
                line-height: 42px;
            }
        }
        .report {
            background-image: url(~@/assets/sprites/homepage.configuration.example/report-bg.png);
        }
        .sample {
            background-image: url(~@/assets/sprites/homepage.configuration.example/sample-bg.png);
        }
        .user {
            background-image: url(~@/assets/sprites/homepage.configuration.example/user-bg.png);
        }
    }
    .line-chart {
        flex: 1;
        min-height: 480px;
        margin-left: 60px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url(~@/assets/sprites/homepage.configuration.example/chart-bg.png);
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 36px;
        padding-right: 36px;
        box-sizing: border-box;
        .line-chart-title {
            display: flex;
            align-items: center;
            img {
                width: 22px;
                height: 22px;
            }
            span {
                margin-left: 10px;
                font-size: 16px;
                color: #4e5969;
            }
        }
        // 22px
        .chart-container {
            height: calc(100% - 22px);
        }
    }
}
</style>
